﻿<div id="body">
    <hr />
    <a href="~/WebClient/index.html">~/WebClient/index.html</a>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="~/Scripts/Custome/fineuploader-3.7.1.min.js"></script>
    <div id="fubErrorAlert" class="alert alert-error hide">
        <button type="button" class="close">&times;</button>
        <span class="message"></span>
    </div>
    
    <div id="fine-uploader-basic" class="btn btn-success" style="position: absolute; z-index: 10000; top: 10px; overflow: visible; border: 2px solid red">
        <i class="icon-upload icon-white"></i>Click to upload
    </div>
    <div id="messages"></div>


    <script>
        (function ($) {
            $(document).ready(function () {
                $fub = $('#fine-uploader-basic');
                $messages = $('#messages');

                var uploader = new qq.FineUploaderBasic({
                    button: $fub[0],
                    request: {
                        endpoint: 'images/upload',
                        params: {
                            title: "asda"
                        }
                    },
                    validation: {
                        allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
                        sizeLimit: 11204800 // 200 kB = 200 * 1024 bytes
                    },
                    callbacks: {
                        onSubmit: function (id, fileName) {
                            $messages.append('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0"></div>');
                        },
                        onUpload: function (id, fileName) {
                            $('#file-' + id).addClass('alert-info')
                                            .html('<img src="client/loading.gif" alt="Initializing. Please hold."> ' +
                                                  'Initializing ' +
                                                  '"' + fileName + '”');
                        },
                        onProgress: function (id, fileName, loaded, total) {
                            if (loaded < total) {
                                progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
                                $('#file-' + id).removeClass('alert-info')
                                                .html('<img src="client/loading.gif" alt="In progress. Please hold."> ' +
                                                      'Uploading ' +
                                                      '"' + fileName + '” ' +
                                                      progress);
                            } else {
                                $('#file-' + id).addClass('alert-info')
                                                .html('<img src="client/loading.gif" alt="Saving. Please hold."> ' +
                                                      'Saving ' +
                                                      '"' + fileName + '”');
                            }
                        },
                        onComplete: function (id, fileName, responseJSON) {
                            console.log(responseJSON);
                            if (responseJSON.success) {
                                $('#file-' + id).removeClass('alert-info')
                                                .addClass('alert-success')
                                                .html('<i class="icon-ok"></i> ' +
                                                      'Successfully saved ' +
                                                      '"' + fileName + '”' +
                                                      '<br><img src="img/success.jpg" alt="' + fileName + '">');
                            } else {
                                $('#file-' + id).removeClass('alert-info')
                                                .addClass('alert-error')
                                                .html('<i class="icon-exclamation-sign"></i> ' +
                                                      'Error with ' +
                                                      '"' + fileName + '”: ' +
                                                      responseJSON.error);
                            }
                        },
                        onError: function (id, name, reason, xhr) {
                            $('#fubErrorAlert .message').text(reason);

                            $('#fubErrorAlert button').click(function () {
                                $('#fubErrorAlert').hide();
                            });

                            $('#fubErrorAlert').show();
                        }
                    }
                });
            });
        }(jQuery));
    </script>
    <hr />
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Welcome to ASP.NET Web API!</h1>
                <h2>Modify the code in this template to jump-start your ASP.NET Web API development.</h2>
            </hgroup>
            <p>
                ASP.NET Web API allows you to expose your applications, data and services to the
                web directly over HTTP.
            </p>
            <p>
                To learn more about ASP.NET Web API visit the
                <a href="http://go.microsoft.com/fwlink/?LinkID=238195" title="ASP.NET Web API Website">ASP.NET Web API Website</a>.
                The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET Web API.
                If you have any questions about ASP.NET Web API, visit
                <a href="http://go.microsoft.com/fwlink/?LinkID=238196" title="ASP.NET Web API Forum">our forums</a>.
            </p>
        </div>
    </section>
    <section class="content-wrapper main-content clear-fix">
        <h3>We suggest the following steps:</h3>
        <ol class="round">
            <li class="one">
                <h5>Getting Started</h5>
                ASP.NET Web API is a framework that makes it easy to build HTTP services that reach
                a broad range of clients, including browsers and mobile devices. ASP.NET Web API
                is an ideal platform for building RESTful applications on the .NET Framework.
                <a href="http://go.microsoft.com/fwlink/?LinkId=245160">Learn more…</a>
            </li>

            <li class="two">
                <h5>Add NuGet packages and jump-start your coding</h5>
                NuGet makes it easy to install and update free libraries and tools.
                <a href="http://go.microsoft.com/fwlink/?LinkId=245161">Learn more…</a>
            </li>
            <li class="three">
                <h5>Find Web Hosting</h5>
                You can easily find a web hosting company that offers the right mix of features
                and price for your applications.
                <a href="http://go.microsoft.com/fwlink/?LinkId=245164">Learn more…</a>
            </li>
        </ol>
    </section>
</div>
